<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <style>
        .mi_wrapper {
        }

        .dress {
            margin-top: 30px;
        }

        .front {
            float: left;
        }

        .last {
            float: right;
        }

        .top {
            background-color: orange;
            height: 58px;
            line-height: 58px;
        }

        .dress .last .item {
            margin-left: 15px;
        }

        .dress .last .item:hover,
        .dress .last .item.activate {
            padding-bottom: 3px;
            border-bottom: 2px solid red;
        }

        .dress .bottom {
            /*background-color: #3c9384;*/
            height: 628px;
            margin-right: -14px;
        }

        .dress .bottom .item {
            float: left;
            width: 234px;
            height: 300px;
            margin-right: 14px;
            margin-bottom: 14px;
            background-color: #dca3a3;
            transition: all 5s ease-in;
        }

        .dress .bottom .item.item1 {
            width: 234px;
            height: 612px;
        }

        .dress .bottom .item.item9,
        .dress .bottom .item.item10 {
            height: 143px;
        }

        .dress .bottom .item a{
            display: inline-block;
            width: 100%;
            height: 100%;
        }

        .dress .bottom .item:hover{
            box-shadow: 0 10px 15px rgba(0,0,0,0.5);
            transform: translateY(-5px);
        }


    </style>
</head>
<body>
<div class="mi_wrapper dress">
    <div class="top clear_fix">
        <div class="front">
            <h3 class="title">智能穿戴</h3>
        </div>
        <div class="last">
            <a class="item activate hot" href="#">热门</a>
            <a class="item info" href="#">穿戴</a>
        </div>
    </div>
    <ul class="bottom">
        <li class="item item1"><a href="#">1</a></li>
        <li class="item item2"><a href="#">2</a></li>
        <li class="item item3"><a href="#">3</a></li>
        <li class="item item4"><a href="#">4</a></li>
        <li class="item item5"><a href="#">5</a></li>
        <li class="item item6"><a href="#">6</a></li>
        <li class="item item7"><a href="#">7</a></li>
        <li class="item item8"><a href="#">8</a></li>
        <li class="item item9"><a href="#">9</a></li>
        <li class="item item10"><a href="#">10</a></li>
    </ul>

</div>

</body>
</html>